<template>
  <div>
    <Header></Header>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-tabs tab-position="left" style="text-align:left;margin:20px">
            <el-tab-pane label="基本设置">
                <el-form label-position="top" label-width="80px">
                    <el-form-item label="头像">
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:80/user/upload"
                            name="file"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="portrait" :src="portrait" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">请点击图片上传，只能是 JPG 格式，大小不能超过 2MB!</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateUserInfo()">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码">
                <el-form label-position="top" label-width="80px">
                    <el-form-item label="当前密码">
                        <el-input v-model="oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="newPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePassword()">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条

export default {
  name: "setting",
  components: {
    Header,
  },
  data() {
    return {
      userDTO: null, // 用来保存登录的用户信息
      userid:0,  // 用户id
      portrait: "",  // 用户头像图片地址
      name: "",  // 用户昵称
      password: "",  // 用户密码（正确）
      oldPassword: "",  // 用户旧密码（修改密码表单让用户填写的旧密码，作为校验）
      newPassword: ""  // 用户新密码（修改密码表单让用户填写的新密码，要和旧密码不一样）
    };
  },
  created() {
    // 获取本地储存中的用户对象
    this.userDTO = JSON.parse(localStorage.getItem("user"));
    console.log(this.userDTO);
    this.userid = this.userDTO.content.id;
    this.portrait = this.userDTO.content.portrait;
    this.name = this.userDTO.content.name;
    this.password = this.userDTO.content.password;
  },
  methods: {
      // 上传头像图片成功后
      handleAvatarSuccess(res, file) {
        this.portrait = "http://192.168.209.128/"+res.filePath
      },
      // 上传头像图片校验
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 更新用户头像与昵称，表单提交
      updateUserInfo() {
        this.axios
        .post("http://localhost:80/user/updateUserInfo", {
            userid:this.userid,
            portrait: this.portrait,
            name: this.name
        })
        .then( (result)=>{
            if (result.data.success) {
                // 更新信息
                this.userDTO.content.portrait = this.portrait;
                this.userDTO.content.name = this.name;
                localStorage.setItem("user", JSON.stringify(this.userDTO)); // 将修改成功的对象信息保存到本地储存中
                this.$message.success("修改成功！");
            } else {
                this.$message.error("修改失败！");
            }
        })
        .catch( (error)=>{
            this.$message.error("修改失败！");
        });
      },
      // 修改密码，表单提交
      updatePassword() {
        if (this.password != this.oldPassword) {
            this.$message.error("当前密码输入错误！");
            return;
        } else if (this.newPassword == this.oldPassword) {
            this.$message.error("新密码与当前密码相同！");
            return;
        }
        this.axios
        .post("http://localhost:80/user/updatePassword", {
            userid:this.userid,
            password: this.newPassword
        })
        .then( (result)=>{
            if (result.data.success) {
                // 更新信息
                this.userDTO.content.password = this.newPassword;
                this.password = this.newPassword;
                localStorage.setItem("user", JSON.stringify(this.userDTO)); // 将修改成功的对象信息保存到本地储存中
                this.$message.success("修改成功！");
            } else {
                this.$message.error("修改失败！");
            }
        })
        .catch( (error)=>{
            this.$message.error("修改失败！");
        });
      }
  }
};
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>